import React, { Component } from 'react'
import "./newsinfo.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiNoticeInfo } from "../../axios/api"
import { UrlSearch , get } from '../../axios/localstorage'

export default class newsinfo extends Component {

    state = {
        data:{},
    }

    componentWillMount(){
        let id = UrlSearch('id');
        this.getInfo(id);
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    getInfo=(id)=>{
        let param = {
            id,
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        }
        
        getApiNoticeInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data.info;
                this.setState({
                    show:1,
                    title:data.title,
                    data,
                    id
                })

                this.props.history.push('/newsinfo?id='+id);
            }   
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoNext=(id)=>{
        if(id){
            this.getInfo(id);
        }
    }

    render() {
        return (
            <div className='newsinfo'>

                <Header />

                <div className='page'>
                    <div className='pm'>
                        <div className="thead">
                            <div>
                                <img className="img" alt="" src="assets/imgs/dingwei.png" />
                                <p className="p_point" onClick={()=>{this.gotoPage('/')}}>首页</p>
                                <img className="icon" alt="" src="assets/img/xiaji.png" />
                                <p className={this.state.show?"p_point":""} onClick={()=>{this.gotoPage('/news');}}>新闻资讯</p>
                                <img hidden={!this.state.show} alt="" className="icon" src="assets/img/xiaji.png" />
                                <p hidden={!this.state.show}>{this.state.title}</p>
                            </div>
                        </div>
                        <div className='pbox'>
                            <div className="info">
                                <div className="itop">
                                    <h1>{this.state.data.title}</h1>
                                    <div className="time">
                                        <h2>发布时间：{this.state.data.create_times_text}</h2>
                                        <p>浏览次数：{this.state.data.num}</p>
                                    </div>
                                    <a className="down" target="_blank" without rel="noreferrer" hidden={!this.state.data.file_text} href={this.state.data.file_text} name="111" download="附件">
                                        <img alt="" src="assets/imgs/xiazai.png"/>
                                        <p>附件下载</p>
                                    </a>

                                    {/* <a className="upload" target="_blank" without rel="noreferrer" href={item.file} name="111" download="附件">
                                                    <img alt="" src="assets/img/xiazai.png"/>
                                                    <h4>下载文件</h4>
                                                </a> */}
                                </div>
                                <div className="cont" dangerouslySetInnerHTML={{
                                    __html: this.state.data.content
                                }}></div>
                                <div className="next">
                                    <h2 onClick={()=>{this.gotoNext(this.state.data.up.id)}} className={this.state.data.up?"nh":""}>上一篇：{this.state.data.up?this.state.data.up.title:"没有了"}</h2>
                                    <h2 onClick={()=>{this.gotoNext(this.state.data.down.id)}} className={this.state.data.down?"nh":""}>下一篇：{this.state.data.down?this.state.data.down.title:"没有了"}</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <Footer />
            </div>
        )
    }
}
